<template>
  <div class="stock-wrapper">
    <div class="top">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="库存管理" name="first" />
        <el-tab-pane label="业务员进货审批" name="second" />
        <el-tab-pane label="业务员退货审批" name="third" />
      </el-tabs>
    </div>
    <div class="middle">
      <component :is="cmpName" />
    </div>
  </div>
</template>
<script>
import StockOpt from './stock/stockOpt'
import EnterExam from './stock/enterExam'
import BackExam from './stock/backExam'
export default {
  data() {
    return {
      activeName: 'first',
      formInline: {
        region: ''
      },
      cmpName: StockOpt
    }
  },
  created() {
    if (this.$route.params.index && this.$route.params.index === 2) {
      this.activeName = 'second'
    } else if (this.$route.params.index && this.$route.params.index === 3) {
      this.activeName = 'third'
    }
  },
  methods: {
    handleClick(tab) {
      switch (tab.paneName) {
        case 'first':
          this.cmpName = StockOpt
          break
        case 'second':
          this.cmpName = EnterExam
          break
        case 'third':
          this.cmpName = BackExam
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.stock-wrapper {
  padding: 0 20px;
  box-sizing: border-box;
  .top {
    padding: 10px 10px;
    box-sizing: border-box;
  }
  .middle {
  }
}
.el-tabs /deep/ .el-tabs__item {
  line-height: 26px;
  color: rgba(51, 51, 51, 1);
  font-size: 18px;
  text-align: center;
  font-family: Roboto;
  font-weight: bold;
}
.el-tabs /deep/.el-tabs__active-bar {
  height: 3px !important;
}
</style>
